<template>
  <div class="tab-container">
    <h5>商户基本信息</h5>
    <div style="margin-top: 20px">
      <el-input style="width: 200px;" disabled="boolean" value="商户代码：SH093800001"/>
      <el-input style="width: 280px;" disabled="boolean" value="商户名称：绍兴金色鞋业商行"/>
      <el-input style="width: 200px;" disabled="boolean" value="商户类型：鞋子类商户"/>
      <el-input style="width: 200px;" disabled="boolean" value="开通日期：2019-01-25"/>
      <el-input style="width: 200px;" disabled="boolean" value="年订货量：300万-500万"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 280px;" disabled="boolean" value="最新认定时间：2019-01-25 12:21:09"/>
      <el-input style="width: 200px;" disabled="boolean" value="最新认定年度：2018年度"/>
      <el-input style="width: 200px;" disabled="boolean" value="最新认定等级：A类商户"/>
      <el-input style="width: 200px;" disabled="boolean" value="上年认定年度：2017年度"/>
      <el-input style="width: 200px;" disabled="boolean" value="上年认定等级：B类商户"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 200px;" disabled="boolean" value="所属地区：浙江省杭州市"/>
      <el-input style="width: 160px;" disabled="boolean" value="联系人：张金海"/>
      <el-input style="width: 200px;" disabled="boolean" value="联系电话：13598865110"/>
      <el-input style="width: 320px;" disabled="boolean" value="联系地址：浙江省杭州市滨江南街路1252号"/>
      <el-input style="width: 200px;" disabled="boolean" value="商户状态：正常使用"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 210px;" disabled="boolean" value="结款方式：一次性"/>
      <el-input style="width: 180px;" disabled="boolean" value="首付款比例：100%"/>
      <el-input style="width: 210px;" disabled="boolean" value="累计预订次数：45次"/>
      <el-input style="width: 220px;" disabled="boolean" value="累计预订款式：126款"/>
      <el-input style="width: 260px;" disabled="boolean" value="累计预订金额：123.25万元"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 410px;" disabled="boolean" value="商户经营品牌：西村明物,Westory,天逸手袋"/>
      <el-input style="width: 680px;" disabled="boolean" value="商户经营门店：绍兴市国商大厦店,诸暨市智谷广场店,上虞市天虹广场店"/>
    </div>
    <h5>商户活动信息</h5>
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane label="商户类信息" name="first">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="customerCode" label="商户编号" width="120"/>
          <el-table-column prop="customerName" label="商户名称" width="150"/>
          <el-table-column prop="customerType" label="商户类型" width="100"/>
          <el-table-column prop="customerRink" label="商户等级" width="100"/>
          <el-table-column prop="operateDate" label="开通日期" width="100"/>
          <el-table-column prop="businessSum" label="年订货量" width="100"/>
          <el-table-column prop="belongArea" label="所属地区" width="120"/>
          <el-table-column prop="totalCount" label="累计订货次数" width="120"/>
          <el-table-column prop="totalSum" label="累计订货金额" width="120"/>
          <el-table-column prop="customerState" label="商户状态" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商品类信息" name="second">
        <el-table :data="tableData2" style="width: 100%">
          <el-table-column prop="productID" label="商品编号" width="120"/>
          <el-table-column prop="productName" label="商品名称" width="120"/>
          <el-table-column prop="productBrand" label="所属品牌" width="120"/>
          <el-table-column prop="productStyle" label="商品款式" width="100"/>
          <el-table-column prop="productColor" label="商品颜色" width="100"/>
          <el-table-column prop="productSize" label="商品尺码" width="200"/>
          <el-table-column prop="stockCount" label="库存总数量" width="100"/>
          <el-table-column prop="prodctPrice" label="预订单价" width="100"/>
          <el-table-column prop="totalSum" label="商品总金额" width="100"/>
          <el-table-column prop="stockDate" label="库存日期" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="订单类信息" name="third">
        <el-table :data="tableData3" style="width: 100%">
          <el-table-column prop="buyNo" label="订单编号" width="120"/>
          <el-table-column prop="CustomerName" label="商户名称" width="150"/>
          <el-table-column prop="productID" label="商品编号" width="120"/>
          <el-table-column prop="productName" label="商品名称" width="120"/>
          <el-table-column prop="productColor" label="商品颜色" width="100"/>
          <el-table-column prop="productSize" label="商品尺码" width="200"/>
          <el-table-column prop="productPrice" label="预订单价" width="100"/>
          <el-table-column prop="buyCount" label="下单数量" width="100"/>
          <el-table-column prop="buySum" label="下单金额" width="100"/>
          <el-table-column prop="buyState" label="订单状态" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="支付类信息" name="fourth">
        <el-table :data="tableData4" style="width: 100%">
          <el-table-column prop="buyNo" label="订单编号" width="120"/>
          <el-table-column prop="customerName" label="下单商户" width="150"/>
          <el-table-column prop="buyDate" label="下单日期" width="100"/>
          <el-table-column prop="buySum" label="下单金额" width="100"/>
          <el-table-column prop="payDate" label="支付日期" width="100"/>
          <el-table-column prop="paySum" label="支付金额" width="100"/>
          <el-table-column prop="payState" label="支付状态" width="100"/>
          <el-table-column prop="accountDate" label="到账日期" width="100"/>
          <el-table-column prop="accountSum" label="到账金额" width="100"/>
          <el-table-column prop="accountState" label="到账状态" width="100"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'Tab2',
  data() {
    return {
      tableData1: [{
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }],
      tableData2: [{
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }],
      tableData3: [{
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }],
      tableData4: [{
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }],
      activeName: 'first'
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .tab-container{
    margin: 30px;
  }
</style>
